import { ColumnWidthOutlined } from '@ant-design/icons';
import { ConfigProvider, theme } from 'antd';
import classNames from 'classnames';
import React, { useContext } from 'react';
import {
  PanelResizeHandle,
  PanelResizeHandleProps,
} from 'react-resizable-panels';
import useStyle from './style';

export type SfwPanelResizeHandleProps = PanelResizeHandleProps;

/**
 * https://react-resizable-panels-git-panelgroup-layout-val-2424f0-bvaughn.vercel.app/examples/pixel-based-layouts
 * @param props
 */
const SfwPanelResizeHandle: React.FC<SfwPanelResizeHandleProps> = (props) => {
  const { className: propsClassName, ...rest } = props;
  const { token } = theme.useToken();
  // 如何使用样式第二步，定义使用的样式名称
  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
  const prefixCls = getPrefixCls('sfw-panel-resize-handle');
  const [wrapSSR, hashId] = useStyle(prefixCls);
  // 如何使用样式第三步，使用样式，`${prefixCls}-polling`
  const className = classNames(prefixCls, propsClassName, hashId);

  return wrapSSR(
    <PanelResizeHandle className={classNames(hashId, className)} {...rest}>
      <ColumnWidthOutlined
        style={{
          color: token.colorTextTertiary,
          fontSize: token.marginSM,
        }}
      />
    </PanelResizeHandle>,
  );
};

export default SfwPanelResizeHandle;
